<template>
    <div id="max">
        <div style="font-size: 13px;color: #333333;">设置/账号管理/添加账号</div>
        <div id="mid">
            <div>
                <div id="small">
                    <p id="wenzi">头像：</p>
                        <el-upload class="avatar-uploader"
                            action="http://172.16.114.53:8080/districtUser/changeAvatar"
                            method="post"
                            name="multipartFile"
                            :show-file-list="true"
                            :on-success="handleAvatarSuccess">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <span>重新上传</span>
                            </el-icon>
                        </el-upload>
                    
                </div>
            </div>
            <div id="small">
                <p id="wenzi">姓名：</p>
                <div id="shuru">
                    <el-input v-model="input1" placeholder="请输入" />
                </div>
            </div>
            <div id="small">
                <p id="wenzi">性别：</p>
                <div id="rad">
                    <div class="my-2 flex items-center text-sm">
                        <el-radio-group v-model="radio1" class="ml-4">
                            <el-radio label="男">男</el-radio>
                            <el-radio label="女">女</el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </div>

            <div id="small">
                <p id="wenzi">联系方式：</p>
                <div id="shuru">
                    <el-input v-model="input2" placeholder="请输入" />
                </div>
            </div>

            <div id="small">
                <p id="wenzi">所属组织：</p>
                <div id="shuru">
                    <el-select v-model="value1" class="m-2" placeholder="请选择" size="large">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
            </div>
            <div id="small">
                <p id="wenzi">所属角色：</p>
                <div id="shuru">
                    <el-select v-model="value2" class="m-2" placeholder="请选择" size="large">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
            </div>

            <div id="small">
                <p id="wenzi">账号：</p>
                <div id="shuru">
                    <el-input v-model="input3" placeholder="请输入" />
                </div>
            </div>
            <div id="small">
                <p id="wenzi">密码：</p>
                <div id="shuru">
                    <el-input v-model="input4" placeholder="请输入" />
                </div>
            </div>
            <div id="small">
                <p id="wenzi">出身年月：</p>
                <div id="shuru">
                    <el-input v-model="input5" placeholder="请输入" />
                </div>
            </div>
            <div id="small">
                <p id="wenzi">是否为组长：</p>
                <div id="rad">
                    <div class="my-2 flex items-center text-sm">
                        <el-radio-group v-model="radio2" class="ml-4">
                            <el-radio label="是">是</el-radio>
                            <el-radio label="否">否</el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </div>
        </div>
        <div id="bottom">
            <router-link to="/zhanghaoguanli">
                <el-button size="large">取消</el-button>
            </router-link>
            <el-button type="primary" size="large" @click="add()">确定</el-button>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, onMounted } from 'vue';
import axios from '@/util/http';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import type { UploadProps } from 'element-plus';

export default defineComponent({
    name: 'zhanghaotianjia',
    setup() {

        const input1 = ref('');//姓名
        const input2 = ref('');//联系方式
        const input3 = ref('');//账号
        const input4 = ref('');//密码
        const input5 = ref('');//出生年月

        const radio1 = ref('男');//性别
        const radio2 = ref('是');//领导

        const value1 = ref('');//所属组织
        const value2 = ref('');//所属角色
        const options1 = [
            {
                value: '元和街道/娄北社区',
                label: '元和街道/娄北社区',
            },
            {
                value: '相城区疾控中心',
                label: '相城区疾控中心',
            },
            {
                value: '姑苏区疾控中心',
                label: '姑苏区疾控中心',
            },
            {
                value: '病例流调组',
                label: '病例流调组',
            },
            {
                value: '密接排查组',
                label: '密接排查组',
            }
        ];//所属组织内容
        const options2 = [
            {
                value: '居家检测员',
                label: '居家检测员',
            },
            {
                value: '区级管理员',
                label: '区级管理员',
            },
            {
                value: '疾控排查员',
                label: '疾控排查员',
            },
            {
                value: '疾控登记员',
                label: '疾控登记员',
            },
            {
                value: '隔离点工作人员',
                label: '隔离点工作人员',
            }
        ];//所属角色内容

        function add() {
            axios({
                method: 'psot',
                url: '/districtUser/addDistrictUser',
                data: {
                    area: localStorage.role,
                    birthday: input5.value,
                    creatTime: "2023-02-27T02:00:07.615Z",
                    creator: localStorage.userName,
                    headPortrait: imageUrl.value,
                    isLeader: radio2.value,
                    nickname: input1.value,
                    organization: value1.value,
                    password: input4.value,
                    phone: input2.value,
                    role: localStorage.role,
                    sex: radio1.value,
                    userName: input3.value,
                }
            }).then((res) => {
                console.log('添加成功');

            })
        }
        //上传头像
        let imageUrl = ref('')

        const handleAvatarSuccess: UploadProps['onSuccess'] = (
            response,
            uploadFile
        ) => {
            imageUrl.value = URL.createObjectURL(uploadFile.raw!)
        }

        // let Table = reactive({
        //         table:[]
        // })
        // onMounted(()=>{
        //     axios({
        //         method:"post",url:"/districtUser/addDistrictUser",params:{
        //             districtSysUser:name
        //         }
        //     }).then((res)=>{
        //         Table.table=res.data.data
        //         console.log(Table.table);

        //     })
        // })
        // //添加数据
        //  function add(){

        //  }   
        return {
            input1,
            input2,
            input3,
            input4,
            input5,

            radio1,
            radio2,

            value1,
            value2,
            options1,
            options2,
            reactive,
            add,
            handleAvatarSuccess,
            imageUrl,

            // ...toRefs(Table),
            // Table
        }
    }
})

</script>

<style scoped>
#max {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: #333;
}

#mid {
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 50px 30px;
    margin-top: 30px;
}

#small {
    display: flex;
    flex-direction: row;
    width: 500px;
    margin: 15px 0;
}

#small>span {
    display: flex;
    justify-content: center;
    align-items: center;
    color: blue;
    cursor: pointer;
}

#wenzi {
    display: flex;
    justify-content: end;
    align-items: center;

    height: 40px;
    width: 100px;
}

#rad {
    display: flex;
    align-items: center;
}

#shuru {
    display: flex;
    align-items: center;
    width: 400px !important;
    height: 40px;
}

#bottom {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding: 50px;
}

#bottom>button {
    width: 95px;
    height: 40px;
}
.avatar-uploader .avatar {
  width: 80px;
  height: 80px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  text-align: center;
}
</style>